<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Facturas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.9.1.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.datapicker.css" />
        
        <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.9.1.custom.js" type="text/javascript"></script>
        <script src="js/grid.locale-es.js" type="text/javascript"></script>
        <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
        <script src="js/ui.datepicker.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            $(document).ready(function(){
                jQuery("#facturas").jqGrid({
                    url:'facturas.php',
                    datatype: 'json',
                    mtype: 'POST',
                    colName:['ID_FACTURA','TIPO_FACTURA','TIPO_GASTO','FECHA_DOCUMENTO','PROVEEDOR',
                              'INGRESO_FACTURA','CONCEPTO','NUMERO_FACTURA','EMPRESA','VALOR_FACTURA',
                                  'FECHA_APROBACION','RESPONSABLE_APRO','ESTADO_FACTURA'],
                    colModel:[
                        {name:'Factura', index:'id_factura', width:40, resizable:false, align:"center"},
                        {name:'Tipo Factura', index:'descripcion_tipo_factura', width:65,resizable:false,editable:true, sortable:true,
                        edittype:'select',
                        editoptions:{
                                dataUrl:"tipo_factura.php"
                            }
                        },
                        {name:'Tipo Gasto', index:'descripcion_tipo_gasto', editable:true,width:65,
                        edittype:'select',
                        editoptions:{
                                maxlenght:20,
                                dataUrl:"tipo_gasto.php"
                            }
                        },
                        {name:'Fecha Doc', index:'fecha_documento', editable:true,
                            width:70,formatter:'date',formatoptions:{newformat:"d/M/Y"},
                            editoptions:{size:20, 
                                    dataInit:function(el){ 
                                        $(el).datepicker({newformat: "d/M/Y"}); 
                                    }, 
                                    defaultValue: function(){ 
                                        var currentTime = new Date(); 
                                        var month = parseInt(currentTime.getMonth() + 1); 
                                        month = month <= 9 ? "0"+month : month; 
                                        var day = currentTime.getDate(); 
                                        day = day <= 9 ? "0"+day : day; 
                                        var year = currentTime.getFullYear(); 
                                        //return year+"-"+month + "-"+day;
                                        return day+"/"+month+"/"+year;
                                    } 
                                }   
                        },
                        {name:'Proveedor', index:'descripcion_proveedor',
                            editable:true,
                            edittype:'select',
                            editoptions:{
                                    maxlenght:20,
                                    dataUrl:"proveedor.php"
                            },
                            width:150},
                        {name:'Fecha Ing.', index:'ingreso_factura', editable:false,width:70,formatter:'date',formatoptions:{newformat:"d/M/Y"}},
                        {name:'Concepto', index:'concepto', editable:true,width:200, formatter:'textarea'},
                        {name:'Numero Fac', index:'numero_factura', editable:true,width:70},
                        {name:'Empresa', index:'descripcion_empresa', editable:true,width:80,
                            edittype:'select',
                            editoptions:{
                                maxlenght:20,
                                dataUrl:"empresa.php"
                            }
                        },
                        {name:'Valor', align:"right",index:'valor_factura', editable:true,width:70,formatter:'currency',formatoptions:{thousandsSeparator:",",decimalSeparator:".",prefix: "$ "}},
                        {name:'Fecha Apro', index:'fecha_aprobacion', editable:true,width:70,formatter:'date',
                            formatoptions:{newformat:"d/M/Y"},
                                editoptions:{size:20, 
                                    dataInit:function(el){ 
                                        $(el).datepicker({newformat: "d/M/Y"}); 
                                    }, 
                                    defaultValue: function(){ 
                                        var currentTime = new Date(); 
                                        var month = parseInt(currentTime.getMonth() + 1); 
                                        month = month <= 9 ? "0"+month : month; 
                                        var day = currentTime.getDate(); 
                                        day = day <= 9 ? "0"+day : day; 
                                        var year = currentTime.getFullYear(); 
                                        //return year+"-"+month + "-"+day;
                                        return day+"/"+month+"/"+year;
                                    } 
                                } 
                        }, 
                        {name:'Resp Apro', index:'responsable_aprobacion', editable:true,width:70},
                        {name:'Estado Fac', index:'descripcion_estado_factura', editable:true,width:70,
                            edittype:'select',
                            editoptions:{
                                maxlenght:20,
                                dataUrl:"estado_factura.php"
                            }
                        },
                    ],
                    pager: '#paginacion_1',
                    rowNum:10,
                    rowList:[10,20,30],
                    sortname: 'id_factura',
                    sortorder: 'asc',
                    width: "100%",
                    height: "100%",
                    editurl:"add.php",
                    viewrecords: true,
                    caption: 'Ingreso de Facturas Sistemas Tecnologicos'
                });
            jQuery("#facturas").jqGrid('navGrid','#paginacion_1',{add:true});
                jQuery("#a1").click(function(){ //Trar Datos de Un Registro
                    var id = jQuery("#tblclientes").jqGrid('getGridParam','selrow');
                    if(id){
                        var ret = jQuery("#tblclientes").jqGrid('getRowData',id);
                        alert("id="+ret.Factura);
                    }else{
                        alert("Registro No seleccionado");
                    }
                });
             });
    </script> 
    </head>
    <body>
        <br>
        <table id="facturas"></table>
        <div id="paginacion_1"></div>
        <a href="#" id="a1">Seleccionar Registro</a>
        <table id="dist_empresa"></table>
        <div id="paginacion_2"></div>
        <br>
    </body>
</html>
